<template>
  <div class="patentvalue clearfix">
    <h2>{{patent.Header && patent.Header.ApplNO}}&nbsp;&nbsp;&nbsp;&nbsp;{{patent.Title}}</h2>
    <div class="con">
      <div class="left-con fl">
        <p class="title">
          技术价值度分析
          <span
            v-if="Interpretation!=''"
          >(价值度 {{Interpretation>0?Interpretation:5}})</span>
        </p>
        <div class="chartWrap clearfix">
          <div class="chartLeft clearfix" style="width:780px">
            <div id="chartOne" style="width:780px"></div>
          </div>
        </div>
        <div class="art-con">
          <p class="art">该图谱客观描述了此专利所处申请时期内对应的技术热度以及潜在的法律稳定性，峰值高低和面积的大小体现了是否有大量相同或高度类似的技术作为专利存在。红色区域峰低且面积小为佳，绿色区域峰高且面积大为佳，两者同时满足为最佳。</p>
        </div>

        <div class="art-con">
          <p class="artTitle">价值谱的三个价值参数</p>
          <p class="art">创新势能：发明前后技术相关度差异</p>
          <p class="art">市场势能：技术产业化规模</p>
          <p class="art">价值指数：综合创新势能和市场势能，明确技术价值指数</p>
        </div>
      </div>
      <div class="right-con fl">
        <div class="title">技术价值度的功能描述</div>
        <p>1.主要谱图表明了该专利的技术价值。水平轴是时间，申请年是计数单位，垂直轴是相似度。</p>
        <p>2.图中的红色区域是申请日期之前的状态，绿色区域是申请日期之后的状态。</p>
        <p>3.相应的年份高度相似的文献在图中达到高峰高度，所以红绿面积和面积变化趋势完美地显示了相应年份的高相关文献趋势；</p>
        <p>4.图中横轴上的绿色突破点显示了对应年的高度相关文献的平均相关性值；</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TechnologyValue",
  components: {
  },
  data() {
    return {
      chartsOneShow: "",
      isLoadingOne: false,
      Interpretation: "",
      option1: {
        backgroundColor: "#fff",
        tooltip: {
          trigger: "axis"
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            splitLine: {
              show: false,
              lineStyle: {
                color: "#dce7f6"
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#dce7f6",
                width: 2
              }
            },
            axisLabel: {
              // interval: 0,
              textStyle: {
                color: "#000"
              }
            },
            data: []
          }
        ],
        yAxis: [
          {
            name: "专利量",
            nameTextStyle: {
              color: "#000"
            },
            type: "value",
            axisLabel: {
              formatter: "{value}"
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#dce7f6"
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#dce7f6",
                width: 2
              }
            },
            axisLabel: {
              textStyle: {
                color: "#000"
              }
            }
          },
          {
            name: "相似度",
            nameTextStyle: {
              color: "#000"
            },
            type: "value",
            axisLabel: {
              formatter: "{value}%",

              textStyle: {
                color: "#000"
              }
            },
            splitNumber: 1,
            max: 100,
            min: 70,
            splitLine: {
              show: false,
              lineStyle: {
                color: "#dce7f6"
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#dce7f6",
                width: 2
              }
            }
          }
        ],
        series: [
          {
            name: "left",
            type: "line",
            color: "#db7f3a", //折线图颜色,搭配markArea为面积图
            lineStyle: {
              //折线的颜色
              color: "#db7f3a"
            },
            smooth: true, //是否平滑处理值0-1,true相当于0.5
            data: [],
            areaStyle: {
              normal: {
                color: "#db7f3a",
                opacity: 0.4
              }
            }
          },
          {
            name: "left",
            type: "line",
            color: "#10ac13", //折线图颜色,搭配markArea为面积图
            lineStyle: {
              //折线的颜色
              color: "#10ac13"
            },
            yAxisIndex: 0,
            smooth: true, //是否平滑处理值0-1,true相当于0.5
            data: [],
            areaStyle: {
              normal: {
                color: "#10ac13",
                opacity: 0.4
              }
            },
            //  汇合点
            markLine: {
              silent: true,
              data: [
                [
                  {
                    coord: ["06", 0],
                    symbol: "none"
                  },
                  {
                    coord: ["06", 38],
                    symbol: "circle",
                    symbolSize: "12",
                    label: {
                      normal: {
                        show: true,
                        position: "end"
                      }
                    },
                    value: "",
                    lineStyle: {
                      normal: {
                        type: "solid",
                        color: "#10ac13",
                        width: 2
                      }
                    }
                  }
                ]
              ]
            }
          },
          {
            name: "right",
            type: "line",
            yAxisIndex: 1,
            markLine: {
              silent: true,
              data: [
                //  left
                [
                  {
                    coord: ["94", 75]
                  },
                  {
                    coord: ["06", 75],

                    label: {
                      normal: {
                        show: true,
                        position: "start",
                        formatter: "{c}%      "
                      }
                    },
                    value: "75",
                    lineStyle: {
                      normal: {
                        type: "dashed",
                        color: "#f43c5f",
                        width: 2
                      }
                    }
                  }
                ],
                // right
                [
                  {
                    coord: ["18", 80]
                  },
                  {
                    coord: ["06", 80],

                    label: {
                      normal: {
                        show: true,
                        position: "start",
                        formatter: "      {c}%"
                      }
                    },
                    value: "80",
                    lineStyle: {
                      normal: {
                        type: "dashed",
                        color: "#9cce14",
                        width: 2
                      }
                    }
                  }
                ]
              ]
            }
          }
        ]
      },
      option2: {},
      patent: {},
      allYear: 0,
      leftYear: 0,
      rightYear: 0,
      leftPix: 0,
      rightPix: 0
    };
  },
  methods: {
    /*
     * params: 无
     * return: 无
     * function: 获取PN号
     * */
    getPatentInfo() {
      let spn = this.$route.query.pn;
      this.$post(this.$Url.patent.invokejson, {
          spn: spn,
          sl: "chs",
          sf: "ShowPatent",
          sx: "showpatent_cn"
        })
        .then(response => {
          if (
            response.data &&
            response.data.data &&
            response.data.data.Patent
          ) {
            this.patent = response.data.data.Patent;
            
          }
        })
        .catch(error => {
          console.error(error);
        });
    },
    getEchart: function() {
      let ths = this;
      let pn = ths.$route.query.pn;

      let myChart = this.$echarts.init(document.getElementById("chartOne"));
      myChart.setOption(this.option1);
      ths.$post(this.$Url.patent.valueanalysis, {
          applyNum: pn
        })
        .then(res => {
          if (
            JSON.stringify(res.data.data.left.year) != "[]" ||
            JSON.stringify(res.data.data.right.year) != "[]"
          ) {
            ths.chartsOneShow = false;

            let left = res.data.data.left;
            let right = res.data.data.right;
            let allYear = left.year.concat(
              right.year.slice(1, right.year.length)
            );
            allYear = allYear.map(function(item) {
              return item;
            });
            var rightR = [];
            for (var i in res.data.data.right.relevant) {
              rightR[rightR.length] = res.data.data.right.relevant[i];
            }
            var rightP = [];
            for (var i in res.data.data.right.patent) {
              rightP[rightP.length] = res.data.data.right.patent[i];
            }
            var leftR = [];
            for (var i in res.data.data.left.relevant) {
              leftR[leftR.length] = res.data.data.left.relevant[i];
            }
            var leftP = [];
            for (var i in res.data.data.left.patent) {
              leftP[leftP.length] = res.data.data.left.patent[i];
            }

            let leftData = [],
              rightData = [];
            for (let i = 0; i < allYear.length; i++) {
              leftData.push(null);
              rightData.push(null);
            }
            leftP.forEach((item, i) => {
              leftData[i] = item;
            });
            rightP.forEach((item, i) => {
              rightData[i + leftP.length - 1] = item;
            });
            ths.Interpretation =
              (
                ((800 + parseInt(res.data.data.v1)) / 1600) * 70 +
                ((50 + parseInt(res.data.data.v2) * 3) / 100) * 30
              ).toFixed(0) < 0
                ? 5
                : (
                    ((800 + parseInt(res.data.data.v1)) / 1600) * 70 +
                    ((50 + parseInt(res.data.data.v2) * 3) / 100) * 30
                  ).toFixed(0);
            myChart.setOption({
              backgroundColor: "#fff",
              tooltip: {
                trigger: "axis",
                formatter: function(params) {
                  let str = "";
                  for (var i = 0; i < params.length; i++) {
                    if (params[i].data != null) {
                      str =
                        ths.langs == "en"
                          ? params[i].name +
                            " Year<br/>" +
                            params[i].marker +
                            "Patent quantity:" +
                            params[i].data
                          : params[i].name +
                            " 年<br/>" +
                            params[i].marker +
                            "专利量：" +
                            params[i].data;
                    }
                  }
                  return str;
                }
              },
              calculable: true,
              xAxis: [
                {
                  type: "category",
                  boundaryGap: false,

                  splitLine: {
                    show: false,
                    lineStyle: {
                      color: "#dce7f6"
                    }
                  },
                  axisTick: {
                    show: false
                  },
                  axisLine: {
                    lineStyle: {
                      color: "#dce7f6",
                      width: 2
                    }
                  },
                  axisLabel: {
                    // interval: 0,
                    textStyle: {
                      color: "#000"
                    }
                  },
                  data: allYear
                }
              ],
              yAxis: [
                {
                  name: "专利量",
                  nameTextStyle: {
                    color: "#000"
                  },
                  type: "value",
                  axisLabel: {
                    formatter: "{value}"
                  },
                  splitLine: {
                    show: true,
                    lineStyle: {
                      color: "#dce7f6"
                    }
                  },
                  axisTick: {
                    show: false
                  },
                  axisLine: {
                    lineStyle: {
                      color: "#dce7f6",
                      width: 2
                    }
                  },
                  axisLabel: {
                    textStyle: {
                      color: "#000"
                    }
                  }
                },
                {
                  name: "相似度",
                  nameTextStyle: {
                    color: "#000"
                  },
                  type: "value",
                  axisLabel: {
                    formatter: "{value}%",

                    textStyle: {
                      color: "#000"
                    }
                  },
                  splitNumber: 1,
                  max: 100,
                  min: 70,
                  splitLine: {
                    show: false,
                    lineStyle: {
                      color: "#dce7f6"
                    }
                  },
                  axisTick: {
                    show: false
                  },
                  axisLine: {
                    lineStyle: {
                      color: "#dce7f6",
                      width: 2
                    }
                  }
                }
              ],
              series: [
                {
                  name: "left",
                  type: "line",
                  color: "#db7f3a", //折线图颜色,搭配markArea为面积图
                  lineStyle: {
                    //折线的颜色
                    color: "#db7f3a"
                  },
                  smooth: true, //是否平滑处理值0-1,true相当于0.5
                  data: leftData,
                  areaStyle: {
                    normal: {
                      color: "#db7f3a",
                      opacity: 0.4
                    }
                  }
                },
                {
                  name: "left",
                  type: "line",
                  color: "#10ac13", //折线图颜色,搭配markArea为面积图
                  lineStyle: {
                    //折线的颜色
                    color: "#10ac13"
                  },
                  yAxisIndex: 0,
                  smooth: true, //是否平滑处理值0-1,true相当于0.5
                  data: rightData,
                  areaStyle: {
                    normal: {
                      color: "#10ac13",
                      opacity: 0.4
                    }
                  },
                  //  汇合点
                  markLine: {
                    silent: true,
                    data: [
                      [
                        {
                          coord: [right.year[0], 0],
                          symbol: "none"
                        },
                        {
                          coord: [right.year[0], rightP[0]],
                          symbol: "circle",
                          symbolSize: "12",
                          label: {
                            normal: {
                              show: true,
                              position: "end"
                            }
                          },
                          value: this.$router.history.current.query.spn,
                          lineStyle: {
                            normal: {
                              type: "solid",
                              color: "#10ac13",
                              width: 2
                            }
                          }
                        }
                      ]
                    ]
                  }
                },
                {
                  name: "right",
                  type: "line",
                  yAxisIndex: 1,
                  markLine: {
                    silent: true,
                    data: [
                      //  left
                      [
                        {
                          coord: [left.year[0], left.avg]
                        },
                        {
                          coord: [right.year[0], left.avg],

                          label: {
                            normal: {
                              show: true,
                              position: "start",
                              formatter: "{c}%      "
                            }
                          },
                          value: left.avg,
                          lineStyle: {
                            normal: {
                              type: "dashed",
                              color: "#f43c5f",
                              width: 2
                            }
                          }
                        }
                      ],
                      // right
                      [
                        {
                          coord: [right.year[right.year.length - 1], right.avg]
                        },
                        {
                          coord: [right.year[0], right.avg],

                          label: {
                            normal: {
                              show: true,
                              position: "start",
                              formatter: "        {c}%"
                            }
                          },
                          value: right.avg,
                          lineStyle: {
                            normal: {
                              type: "dashed",
                              color: "#9cce14",
                              width: 2
                            }
                          }
                        }
                      ]
                    ]
                  }
                }
              ]
            });
            setTimeout(() => {
              myChart.resize();
            }, 50);
          } else {
            ths.chartsOneShow = true;
          }
        })
        .catch(error => {
          console.error(error);
        });
    }
  },
  mounted: function() {
    this.getPatentInfo();
    this.getEchart();
  }
};
</script>

<style scoped lang="scss">
.patentvalue {
  width: 1200px;
  min-height: 800px;
  background-color: #fff;
  margin: 20px auto;
  padding: 20px;
  box-sizing: border-box;
  h2 {
    font-size: 24px;
    text-align: center;
    line-height: 80px;
    border-bottom: 1px solid #f0f1f3;
  }
  .con {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .left-con {
    padding: 0 20px;
    width: calc(100% - 340px);
    .title {
      font-size: 14px;
      font-weight: bold;
      line-height: 50px;
      margin: 0;
    }
    .chartWrap {
      border: 1px solid #dee1f2;
      height: 240px;
    }
  }
  .right-con {
    padding: 20px;
    width: 300px;
    background-color: #f9fafc;
    box-sizing: border-box;
    margin: 50px 20px;
    .title {
      font-size: 14px;
      font-weight: bold;
    }
    p {
      font-size: 12px;
      color: #a4a4a4;
      line-height: 25px;
    }
  }
  .chartLeft {
    float: left;
    height: 240px;
    width: 378px;
    // margin-right: 20px;
  }
  .chartRight {
    float: left;
    height: 240px;
    width: 378px;
  }
  #chartOne {
    height: 240px;
    width: 378px;
    float: left;
    // border: 1px solid #dee1f2;
    box-sizing: border-box;
  }
  #chartTwo {
    height: 240px;
    width: 378px;
    float: left;
    // border: 1px solid #dee1f2;
    box-sizing: border-box;
  }
  .art-con {
    background-color: #f9fafc;
    margin-top: 20px;
    padding: 20px;
    box-sizing: border-box;
  }
  .art {
    line-height: 25px;
    color: #5e5f73;
    font-size: 14px;
  }
  .artTitle {
    font-size: 14px;
    font-weight: bold;
  }
}
</style>
